(async function () {
  const id = location.search.substring(4);
  axios.defaults.baseURL = 'http://124.223.14.236:3001';

  // ===============> 获取菜单详情
  const { data } = await axios.get('/api/recipe/' + id)
  const menuDetail = data.data;
  console.log(menuDetail);
  const img = 'http://124.223.14.236:3001' + '/public/' + menuDetail.img;
  document.querySelector('.container .left img').src = img;
  document.querySelector('.container .right h3').innerHTML = menuDetail.name;
  document.querySelector('.container .right p').innerHTML = menuDetail.description;

  //===============>渲染美食列表
  const { data: res } = await axios.get('/api/recipeInfo/', {
    params: {
      recipe_id: id,
    }
  })
  const list = res.data;
  console.log(list);
  if (list.length) {
    let listStr = list
      .map((item, index) => {
        const { img, title, id } = item;
        return `
          <li>
            <a href="./detail.html?id=${id}">
              <img src=${'http://124.223.14.236:3001' + '/public/' + img} alt="" />
              <h3>${title}</h3>
            </a>
          </li>
        `;
      })
      .join('');
    document.querySelector('#list-box').innerHTML = listStr;
  } else {
    document.body.innerHTML += '<p class="noinfo">没有美食哦...</p>';
  }
})();